<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind样式设置</title>
		<script src="js/vue.global.js"></script>
		<style>
			.text{
				padding: 16px;
				border: 1px solid brown;
				text-align: center;
				border-radius: 6px;
				
				
			}
			.shadow{
				box-shadow: 2px 2px 5px #ccc;
			}
			.success{
				color:green;
			}
			.error{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p class="text"  :class="{'shadow':isShadow}"
				:style="{'font-size': fs, fontWeight: fw, color: 'red'}">三更灯火五更鸡，正是男儿读书时</p>
			<p :class="right?'success':'error'">{{right?'你输入的信息正确':'你输入的信息有误'}}</p>
			<p :class="['text',{'shadow':isShadow}]">三更灯火五更鸡，正是男儿读书时</p>
		</div>
		<script>
			Vue.createApp({
				data() {
					return{
						fs:'20px',
						fw:700,
						isShadow:true,
						right:true
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>